<template lang="pug">
div
  obj-single-select(
    :options="optometrists",
    key="id",
    label="name",
    :placeholder="placeholder",
    :update="update",
    :selected.sync="optometrist",
    type="selected",
    @click="click",
    :loading="loading",
    :searchable="true",
  )
</template>

<script>
import { getOptometrists } from '../../vuex/action'
import ObjSingleSelect from './objSingle'

export default {
  name: 'optometristSelect',
  components: {
    ObjSingleSelect
  },
  vuex: {
    getters: {
      optometrists: ({ optometrist }) => optometrist.optometrists,
    },
    actions: {
      getOptometrists,
    }
  },
  props: ['optometrist'],
  data () {
    return {
      loading: false,
    }
  },
  methods: {
    click (e) {
      if (e.target.parentElement.classList.toString() === 'multiselect__tags') {
        this.load()
      }
    },
    load () {
      catchError(async () => {
        this.loading = true
        await this.getOptometrists()
        this.loading = false
      })
    },
    update({id, name}) {
      _.assign(this.optometrist, {id, name})
    }
  },
  created () {
    this.load()
  },
  computed: {
    placeholder () {
      const result = _.find(this.optometrists, ['id', this.optometrist.id])
      return result ? result.name : '选择验光师'
    },
    selected () {
      return this.optometrist
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
